﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Grids - Even/Odd Rows</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.css" />
    <link rel="stylesheet" href="../../../css/integralui.checkbox.css" />
    <link rel="stylesheet" href="../../../css/integralui.treegrid.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-flat-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.checkbox.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.lists.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.treegrid.min.js"></script>
    <script type="text/javascript">
 		angular
			.module("appModule", ["integralui"])
			.controller("appCtrl", ["$scope", "$timeout", "IntegralUITreeGridService", function($scope, $timeout, $gridService){
				$scope.gridName = "gridSample";
				$scope.rows = [];
				$scope.defaultIcon = "icons-medium empty-doc";
				$scope.gridLines = 'horizontal';

				$scope.columns = [
					{ id: 1, headerText: "Name", width: 225 },
					{ id: 2, headerText: "Date Modified", headerAlignment: "center", contentAlignment: "center", width: 125 },
					{ id: 3, headerText: "Type", headerAlignment: "center", width: 150 },
					{ id: 4, headerText: "Size", headerAlignment: "center", contentAlignment: "right", width: 90 }

				];

				var evenRowStyle = {
					general: {
						normal: 'even-row'
					}
				}

				var oddRowStyle = {
					general: {
						normal: 'odd-row'
					}
				}


				$scope.flatData = [
					{ 
						id: 1,
						text: "Favorites",
						icon: "icons-medium favorites",
						cells: [{ cid: 1, text: "Favorites" }]
					},
					{ 
						id: 11,
						pid: 1,
						text: "Desktop",
						cells: [{ cid: 1, text: "Desktop" }, { cid: 2, text: "4/7/2015" }, { cid: 3, text: "File Folder" }, { cid: 4, text: "7 KB" }]
					},
					{ 
						id: 12,
						pid: 1,
						text: "Downloads",
						icon: "icons-medium downloads",
						cells: [{ cid: 1, text: "Downloads" }, { cid: 2, text: "4/3/2015" }, { cid: 3, text: "File Folder" }, { cid: 4, text: "23,719 KB" }]
					},
					{ 
						id: 2,
						text: "Libraries",
						icon: "computer-icons folder",
						cells: [{ cid: 1, text: "Libraries" }]
					},
					{ 
						id: 21,
						pid: 2,
						text: "Documents",
						icon: "icons-medium documents",
						expanded: false,
						cells: [{ cid: 1, text: "Documents" }, { cid: 3, text: "Library" }, { cid: 4, text: "104 KB" }]
					},
					{ 
						id: 211,
						pid: 21,
						text: "My Documents",
						cells: [{ cid: 1, text: "My Documents" }, { cid: 2, text: "4/7/2015" }, { cid: 3, text: "File Folder" }, { cid: 4, text: "61 GB" }]
					},
					{ 
						id: 212,
						pid: 21,
						text: "Public Documents",
						cells: [{ cid: 1, text: "Public Documents" }, { cid: 2, text: "2/17/2015" }, { cid: 3, text: "File Folder" }, { cid: 4, text: "43 KB" }]
					},
					{ 
						id: 22,
						pid: 2,
						text: "Music",
						icon: "icons-medium music-note",
						cells: [{ cid: 1, text: "Music" }, { cid: 2, text: "3/19/2015" }, { cid: 3, text: "Library" }, { cid: 4, text: "12,748 KB" }]
					},
					{ 
						id: 23,
						pid: 2,
						text: "Pictures",
						icon: "icons-medium pictures",
						cells: [{ cid: 1, text: "Pictures" }, { cid: 2, text: "1/29/2015" }, { cid: 3, text: "Library" }, { cid: 4, text: "1,079 KB" }]
					},
					{ 
						id: 24,
						pid: 2,
						text: "Videos",
						icon: "icons-medium videos",
						cells: [{ cid: 1, text: "Videos" }, { cid: 2, text: "4/5/2015" }, { cid: 3, text: "Library" }, { cid: 4, text: "37,251 KB" }]
					},
					{ 
						id: 3,
						icon: "icons business",
						text: "Computer",
						icon: "icons-medium pc",
						cells: [{ cid: 1, text: "Computer" }]
					},
					{ 
						id: 31,
						pid: 3,
						text: "Local Disk (C:)",
						icon: "icons-medium disk",
						cells: [{ cid: 1, text: "Local Disk (C:)" }, { cid: 2, text: "4/3/2015" }, { cid: 3, text: "Local Disk" }, { cid: 4, text: "249 GB" }]
					},
					{ 
						id: 32,
						pid: 3,
						text: "Storage (D:)",
						icon: "icons-medium disk",
						cells: [{ cid: 1, text: "Storage (D:)" }, { cid: 2, text: "1/27/2015" }, { cid: 3, text: "Local Disk" }, { cid: 4, text: "449 GB" }]
					},
					{ 
						id: 4,
						text: "Network",
						icon: "icons-medium network",
						cells: [{ cid: 1, text: "Network" }]
					},
					{ 
						id: 5,
						text: "Recycle Bin",
						icon: "icons-medium recycle",
						cells: [{ cid: 1, text: "Recycle Bin" }, { cid: 2, text: "2/7/2015" }, { cid: 4, text: "5,296 KB" }]
					}
				];

				var loadTimer = $timeout(function(){
					$gridService.loadData($scope.gridName, $scope.flatData);


					var updateTimer = $timeout(function(){
						updateAppearance();

						$timeout.cancel(updateTimer);
					}, 150);

					$timeout.cancel(loadTimer);
				}, 1);

				var updateAppearance = function(){
					var list = $gridService.getFlatList($scope.gridName);
					for (var i = 0; i < list.length; i++)
						list[i].style = i % 2 == 0 ? evenRowStyle : oddRowStyle;

					var refreshTimer = $timeout(function(){
						$gridService.refresh($scope.gridName);

						$timeout.cancel(refreshTimer);
					}, 100);
				}

				$scope.onAfterExpand = function(e){
					var updateTimer = $timeout(function(){
						updateAppearance();

						$timeout.cancel(updateTimer);
					}, 1);

				}

				$scope.onAfterCollapse = function(e){
					var updateTimer = $timeout(function(){
						updateAppearance();

						$timeout.cancel(updateTimer);
					}, 1);

				}
			}]);
    </script>
    <style type="text/css">
		/* TreeGrid settings */
		.iui-treegrid-column-header-cell, .iui-treegrid-column-footer-cell
		{
			padding: 0 2px;
		}
		.iui-treegrid-row-cell-content
		{
			padding: 4px 2px;
		}
		.even-row
		{
			background: #f5f5f5;
		}
		.odd-row
		{
			background: #e1e1e1;
		}

		/* Sample settings */
		.feature-content
		{
			width: 750px;
		}
		.directive
		{
			border: thin solid #cecece;
        	width: 650px;
        	height: 350px;
		}
    </style>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span style="color:#c60d0d">IntegralUI</span> Studio <span style="font-size:0.75em; font-style:italic">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
	        <h2 class="feature-title">Grids / Even-Odd Rows</h2>
	        <div class="feature-content">
	            <div style="display:inline-block">
	                <iui-treegrid name="{{gridName}}" class="directive" columns="columns" rows="rows" allow-focus="false" show-footer="false" grid-lines="gridLines" after-expand="onAfterExpand(e)" after-collapsed="onAfterCollapse(e)"></iui-treegrid>
                    <br style="clear:both;"/>
                </div>
                <div class="feature-help" style="margin:0">
                    <p><span class="initial-space"></span>An example of TreeGrid with rows displayed in alternate colors.</p>
                    <p><span class="initial-space"></span>Each row can have a unique look. This is done by setting custom CSS class to the style of specific row. In case of this sample, we want to have even rows in same color, and different colro for odd rows. This is done by creating two custom CSS classes which will be applied to even or odd rows, accordingly to their order.</p>
                    <p><span class="initial-space"></span>We are using a list of currently visible rows to apply style changes. And because this list doesn't include child rows of collapsed parent row, whenever row is expanded or collapsed, the appearance is updated. By handling afterExpand and afterCollapsed events, we can update their appearance, so that even/odd row look is sustained.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
